/***************************************************
	 Sitio Iofractal by IOFractal
***************************************************
***************************************************
			      Reset
***************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary {
   margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}



a img {
   border: none
}

aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}

/***************************************************
			      Global styles
***************************************************/

html {
	width: 100%;
	height: 100%;
}

body {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background:#fff  /* Old browsers */
	margin: 0 0 1px; height: 100%; 
	line-height: 1.7;	

}

a{
   color:#fff;
}
/***************************************************
			    Links
***************************************************/





/***************************************************
			    Main container
***************************************************/
	
#container {
	position: relative;
	width: 980px;
	margin: 0 auto;
	margin-top:0px;
}


/***************************************************
				Header
***************************************************/


header {
	position: relative;
	width:100%;
background: rgb(61,61,61); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(61,61,61,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,61,61,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(61,61,61,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(61,61,61,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(61,61,61,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(61,61,61,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

}
	
img#header{
   position:relative;
   margin-left:0px;
}
#header{
   position:relative;
   margin-left:20px;


}
 
/***************************************************
				MENU
***************************************************/	
.nav{
  top:-10px;
}


a.nav{
   text-decoration:none;
}

     span.nav{
            position:relative;
	    font-family:'arial';
            text-align: center;
            font-size:14px;
            font-weight: normal;
            font-style:normal;
	     z-index:11;
	   vertical-align: middle;
	   float:right;
	   margin-top:30px;
	   margin-right:50px;

        }
	

        span.nav a.nav{
	
	    color:rgba(255, 255, 255, 1);
            text-shadow:0px 1px 1px #000;
            padding:5px 5px;
	    -webkit-border-radius:4px;
	    -moz-border-radius:4px;
	    -webkit-transition:all 0.3s ease-in-out;
	    -moz-transition:all 0.3s ease-in-out;
	    -o-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
	   
	    
        }
        span.nav a.nav:hover,
	span.nav a.nav:focus{
            color:#ece63a;
           
        }
 
   
span.nav a.nav#active{
            color:#ece63a;
	  
        }
   
/***************************************************
				Top-Left-Box
***************************************************/	

.top-left-box{
 float: left;
 height:100%;
 width: 100%;
 /*background-color:#eee;
 background-image: url("../images/bg.png"); background-repeat: repeat ; 
 background-attachment: scroll;
 background-position: center center; */
}
	
.top-left-box-content {
   padding: 15px 15px 20px 30px;
   padding-top: 35px;
   padding-bottom:20px;
   
}

.title-box-top-left{
	font-family: 'OstrichSansRoundedMedium', Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: normal;
	font-size:38px;
	line-height: 0.9;
	color: rgb(138, 194, 234);
	text-align: left;
	margin-left:10px;
	margin-bottom: 3px;
	padding-bottom: 5px;
}


.subtitle-box-top-left {
        color: rgb(140, 134, 129);
	font-size: 22px;
	padding-bottom: 8px;
	margin-left:10px;
}


.top-left-box-container{
    margin-top:-27px;
    padding:30px;
}


.text_content_left-box{
     font-family: Arial, Helvetica, sans-serif; 
	color: #575757;
	text-decoration: none;
	padding-top:20px;
	text-align: justify;
	padding-right:20px;
	width:620px;
}
.text_content{
        font-family: Arial, Helvetica, sans-serif; 
	color: #575757;
	text-decoration: none;
	padding-top:20px;
	text-align: justify;
	padding-right:20px;
   
}


ul.article{
   margin-left:50px;
}

li.article{
   margin-left:20px;
}


/***************************************************
				Middle-Left-Box
***************************************************/	

.middle-left-box{
  margin-left:30px;
  float: left;
  position:relative;
  padding-top:15px;
  width:260px;
  background-color:#eff3f4;
}

.middle-left-box-content{
   padding-top: 5px;
   padding-right-value: 15px;
   padding-bottom:15px;
   text-align:center;
  
}

.title-box-middle-left {
   font-family: 'bender_thinregular', Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: normal;
	padding-top:10px;
	font-size:33px;
	line-height: 0.9;
	color: rgb(138, 194, 234);
	text-align: center;
	margin-left:10px;
	margin-bottom: 3px;
	padding-bottom: 5px;
}


/***************************************************
				Middle-Right-Box
***************************************************/

.middle-right-box{
  margin-left:15px;
  float: left;
  position:relative;
  padding: 15px 15px 20px 30px;
  width:260px;
  background-color:#fff;


}

.middle-right-box-content{
   text-align:center;
   padding-top: 5px;
   padding-right-value: 15px;
   padding-bottom:5px;

}

.title-box-middle-right {
   font-family: 'OstrichSansRoundedMedium', Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: normal;
	font-size:38px;
	line-height: 0.9;
	color: rgb(138, 194, 234);
	text-align: center;
	margin-left:10px;
	margin-bottom: 3px;
	padding-bottom: 5px;
}


/***************************************************
				Contacto
***************************************************/

p.contacto {
   position:relative;
   width:300px;
   float:left;
}

/***************************************************
				Formulario-Box
****************
**************************************************/
.formulario_box{
   position: relative;
   float:right;
}



input.boton_contact {
   margin-top: -30px;
   position:relative;
   float:right;
}



/***************************************************
				   Input
***************************************************/

input#Comentario{
   text-align: left;
   vertical-align:top;
   padding-bottom:50px;
   border-radius:5px;
}

input{
   border-radius:5px;
   padding-top:5px;
   padding-bottom:5px;
   border: 1px solid #ccc;
}


/***************************************************
				   textarea
***************************************************/

textarea.formulario{
   padding:2px;
   border-radius:5px;
   border: 1px solid #ccc;
}
/***************************************************
				IMAGES
***************************************************/	

.images_container{
   margin-top:20px;
   text-align:center;
}


#logo_iof{
   position: absolute;
   right:60px;
   top:95px;
}



/***************************************************
	       IMAGES Redes sociales Footer
***************************************************/

#logo_fb_footer{
   position:relative;
      margin-top:0px;
      margin-left:-50px;
      opacity:0.6;
      width:44px;
      left:50%;
}

#logo_fb_footer:hover{
      opacity:1;
} 
 
#logo_tw_footer{
   position:relative;
      left:50%;
      margin-top:-46px;
      opacity:0.6;
        width:44px;
}

#logo_tw_footer:hover{
      opacity:1;
}



img.historia{
   margin-left:-40px;
}


/***************************************************
			        BOTONES
***************************************************/   
.boton_basic {
        float:right;
	 margin-top:50px;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	margin-bottom:10px;
}
.boton_basic:hover {
   text-decoration: underline;
	
}.boton_basic:active {
	position:relative;
	top:1px;
	text-decoration: underline;
}

.boton_basic#Enviar {
	 margin-top:-30px;
}

/***************************************************
				   FONDO BLANCO
***************************************************/

.fondo_blanco{
       background-color: #fff;
       padding:30px;
       margin-top:-27px;
}


/***************************************************
				   SEPARATOR 
***************************************************/

#separator{
   text-align: center;
}

#separator_open_index{
   text-align: center;
   margin-top:-30px;
}



#separator_open{
   text-align: center;
}

#separator_close{
   text-align: center;
   margin-top:-20px;
}


#bottom_box{
	position: relative;
	top:100px;
	padding:20px;
	width: 100%;
	background-position: left top;
	background-repeat: repeat-x;
	top:20px;
	color: rgb(255, 255, 255);
	font-size: 0.9em;
	clear:both;
	background: rgb(14,14,14); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(14,14,14,1) 0%, rgba(61,61,61,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(61,61,61,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(14,14,14,1) 0%,rgba(61,61,61,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(14,14,14,1) 0%,rgba(61,61,61,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(14,14,14,1) 0%,rgba(61,61,61,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(14,14,14,1) 0%,rgba(61,61,61,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */

text-align:center;
}

/***************************************************
			        FOOTER
***************************************************/

footer {
	position: relative;
	top:0px;
	height:200px;
	width: 100%;
	background-position: left top;
	background-repeat: repeat-x;
	top:20px;
	color: rgb(255, 255, 255);
	font-size: 0.9em;
	clear:both;
	background: rgb(14,14,14); /* Old browsers */
text-align:center;
}

#menu_footer{
   position:relative;
   
   padding: 8px 26px;
}



/***************************************************
				   SPECIFIC
***************************************************/


.clearing {
	clear: both;
	display: inline;
	width: 100%;
	height: 0;
	overflow: hidden;
}


/***************************************************
				   FONT FACE
***************************************************/

@font-face {
    font-family: 'bender_thinregular';
    src: url('../fonts/bender-thin-webfont.eot');
    src: url('../fonts/bender-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bender-thin-webfont.woff') format('woff'),
         url('../fonts/bender-thin-webfont.ttf') format('truetype'),
         url('../fonts/bender-thin-webfont.svg#bender_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}